<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>九宫格布局</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#wrap .title{
				color: sienna;
			}
			#wrap .price{
				color: red;
			}
			#wrap{
				overflow: hidden;
			}
			#wrap.item{
				width: 260px;
				height: 360px;
				font-size: 13px;
				
			}
		</style>
	</head>
	<body>
		<div class="cols">
			<button type="button">3列</button>
			<button type="button">4列</button>
			<button type="button">5列</button>
		</div>
		<div id="wrap">
			<div class="item">
				<div class="imgContainer">
					<img  src="../images/con1.jpg" />
					<p class="title">纯色短袖女春季T恤韩版国新款服装2021潮</p>
					<p class="price">￥88</p>
				</div>
			</div>
			<div class="item">
				<div class="imgContainer">
					<img  src="../images/con2.jpg" />
					<p class="title">纯色短袖女春季T恤韩版国新款服装2021潮</p>
					<p class="price">￥88</p>
				</div>
			</div>
			<div class="item">
				<div class="imgContainer">
					<img  src="../images/con3.jpg" />
					<p class="title">纯色短袖女春季T恤韩版国新款服装2021潮</p>
					<p class="price">￥88</p>
				</div>
			</div>
			<div class="item">
				<div class="imgContainer">
					<img  src="../images/con4.jpg" />
					<p class="title">纯色短袖女春季T恤韩版国新款服装2021潮</p>
					<p class="price">￥88</p>
				</div>
			</div>
			<div class="item">
				<div class="imgContainer">
					<img  src="../images/con2.jpg" />
					<p class="title">纯色短袖女春季T恤韩版国新款服装2021潮</p>
					<p class="price">￥88</p>
				</div>
			</div>
			<div class="item">
				<div class="imgContainer">
					<img  src="../images/con2.jpg" />
					<p class="title">纯色短袖女春季T恤韩版国新款服装2021潮</p>
					<p class="price">￥88</p>
				</div>
			</div>
			<div class="item">
				<div class="imgContainer">
					<img  src="../images/con4.jpg" />
					<p class="title">纯色短袖女春季T恤韩版国新款服装2021潮</p>
					<p class="price">￥88</p>
				</div>
			</div>
			<div class="item">
				<div class="imgContainer">
					<img  src="../images/con1.jpg" />
					<p class="title">纯色短袖女春季T恤韩版国新款服装2021潮</p>
					<p class="price">￥88</p>
				</div>
			</div>
			<div class="item">
				<div class="imgContainer">
					<img  src="../images/con3.jpg" />
					<p class="title">纯色短袖女春季T恤韩版国新款服装2021潮</p>
					<p class="price">￥88</p>
				</div>
			</div>
			<div class="item">
				<div class="imgContainer">
					<img  src="../images/con2.jpg" />
					<p class="title">纯色短袖女春季T恤韩版国新款服装2021潮</p>
					<p class="price">￥88</p>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var btns = document.getElementsByTagName('button');
			var item = document.getElementsByClassName('item');
			btns[0].onclick = function(){
				//offsetWidth动态获取div的宽度
				xh(3);
			}
			btns[1].onclick = function(){
				
				xh(4.1);
			}
			btns[2].onclick = function(){
	
				xh(5);
			}
			/* for循环代码冗余 */
			function xh(colsNum){
				for(var i = 0 ; i < item.length ;i++){
					item[i].style.float = 'left';
					item[i].parentNode.style.width =(colsNum*item[i].offsetWidth)+'px';
				}
			}
		</script>
	</body>
</html>
